import React from 'react';
import { ColorPicker as AntdColorPicker } from 'antd';
import type { ColorPickerProps as AntdColorPickerProps } from 'antd';
import { createStyles } from 'antd-style';

export interface ColorPickerProps extends AntdColorPickerProps {
  /**
   * @description 自定义样式类名
   */
  customClassName?: string;
}

const useStyles = createStyles(({ token, css }) => ({
  colorPicker: css`
    cursor: pointer;
  `,
}));

const ColorPickerComponent: React.FC<ColorPickerProps> = ({ customClassName, className, ...restProps }) => {
  const { styles, cx } = useStyles();
  
  const colorPickerClassName = cx(
    className,
    customClassName,
    styles.colorPicker
  );

  return <AntdColorPicker className={colorPickerClassName} {...restProps} />;
};

const ColorPicker = Object.assign(ColorPickerComponent, {
  _InternalPanelDoNotUseOrYouWillBeFired: (AntdColorPicker as any)._InternalPanelDoNotUseOrYouWillBeFired,
});

export { ColorPicker };
export default ColorPicker;

